<template>
  <!-- <div>{{ msg }}</div> -->
  <div>
    <!-- Main Wrapper -->
    <div class="main-wrapper">
      <!-- Header -->
      <div class="header">
        <!-- Logo -->
        <div class="header-left">
          <a href="index.html" class="logo">
            <img src="../assets/img/logo.png" alt="Logo" />
          </a>
          <a href="index.html" class="logo logo-small">
            <img
              src="../assets/img/logo-small.png"
              alt="Logo"
              width="30"
              height="30"
            />
          </a>
        </div>
        <!-- /Logo -->
        <a href="javascript:void(0);" id="toggle_btn">
          <i class="fas fa-bars"></i>
        </a>
        <div class="top-nav-search">
          <form>
            <input type="text" class="form-control" placeholder="Search here" />
            <button class="btn" type="submit">
              <i class="fa fa-search"></i>
            </button>
          </form>
        </div>
        <!-- Mobile Menu Toggle -->
        <a class="mobile_btn" id="mobile_btn"> <i class="fas fa-bars"></i> </a>
        <!-- /Mobile Menu Toggle -->
        <!-- Header Right Menu -->
        <ul class="nav user-menu">
          <!-- Flag -->
          <li class="nav-item dropdown has-arrow flag-nav mr-2">
            <a
              class="nav-link dropdown-toggle"
              data-toggle="dropdown"
              href="#"
              role="button"
            >
              <img
                src="../assets/img/flags/us-1.png"
                alt=""
                width="32"
                height="32"
                class="rounded-circle"
              />
            </a>
            <div class="dropdown-menu dropdown-menu-right">
              <a href="javascript:void(0);" class="dropdown-item">
                <img src="../assets/img/flags/us.png" alt="" height="16" /> English
              </a>
              <a href="javascript:void(0);" class="dropdown-item">
                <img src="../assets/img/flags/fr.png" alt="" height="16" /> French
              </a>
              <a href="javascript:void(0);" class="dropdown-item">
                <img src="../assets/img/flags/es.png" alt="" height="16" /> Spanish
              </a>
              <a href="javascript:void(0);" class="dropdown-item">
                <img src="../assets/img/flags/de.png" alt="" height="16" /> German
              </a>
            </div>
          </li>
          <!-- /Flag -->
          <!-- Notifications -->
          <li class="nav-item dropdown">
            <a href="#" class="nav-link notifications-item">
              <i class="feather-bell"></i>
              <span class="badge badge-pill">3</span>
            </a>
          </li>
          <!-- /Notifications -->
          <!-- Chat -->
          <li class="nav-item dropdown">
            <a href="chat.html" class="dropdown-toggle nav-link chat-header">
              <i class="feather-message-square"></i>
              <span class="badge badge-pill header-chat">6</span>
            </a>
          </li>
          <!-- /Chat -->
          <li class="nav-item dropdown has-arrow main-drop ml-md-3">
            <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown">
              <span class="user-img"
                ><img src="../assets/img/avatar.jpg" alt="" />
                <span class="status online"></span
              ></span>
            </a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="profile.html"
                ><i class="feather-user"></i> My Profile</a
              >
              <a class="dropdown-item" href="login.html"
                ><i class="feather-power"></i> Logout</a
              >
            </div>
          </li>
        </ul>
        <!-- /Header Right Menu -->
      </div>
      <!-- /Header -->

      <!-- Sidebar -->
      <div class="sidebar" id="sidebar">
        <div class="sidebar-inner slimscroll">
          <div id="sidebar-menu" class="sidebar-menu">
            <ul>
              <li class="menu-title"><span>Main</span></li>
              <!-- <li class="active">
                <a @click="jixiao"><i class="feather-list"></i><span class="shape1"></span
                  ><span class="shape2"></span> <span>医生绩效配置</span></a
                >
              </li> -->
              <!-- <li class="submenu">
                <a href="#"
                  ><i class="feather-grid"></i> <span>设备管理</span>
                  <span class="menu-arrow"></span
                ></a>
                <ul>
                  <li style="color:#ffff" @click="fenlei"><a >新增分类</a></li>
                  <li style="color:#ffff" @click="shebei"><a >新增设备</a></li>
                </ul>
              </li> -->
              <!-- <li style="color:#ffff" @click="yygzt"><a ><i class="feather-user"></i> <span>预约工作台</span></a>
							</li> -->
              <li style="color:#ffff" @click="rzsh"><a ><i class="feather-home"></i><span>认证审核</span></a>
							</li>
              <!-- <li style="color:#ffff" @click="myyy"><a><i class="feather-user"></i> <span>我的预约</span></a>
							</li> -->
              <li style="color:#ffff" @click="myrenzheng"><a><i class="feather-calendar"></i> <span>我的认证</span></a>
							</li>
              <!-- <li class="submenu">
                <a href="#"
                  ><i class="feather-grid"></i> <span>设备</span>
                  <span class="menu-arrow"></span
                ></a>
                <ul>
                  <li style="color:#ffff" @click="czrz"><a >操作日志</a></li>
                  <li style="color:#ffff" @click="zhgl"><a >账号管理</a></li>
                  <li style="color:#ffff" @click="password"><a >修改密码</a></li>
                </ul>
              </li> -->
            </ul>
          </div>
        </div>
      </div>
      <!-- /Sidebar -->

      <!-- Page Wrapper -->
      <div class="page-wrapper">
        <div class="content container-fluid">
          <div class="row">
            <div class="col-sm-12">
              <div class="card">
                <div class="card-body">
                  <div class="con">
                    <div class="con_title">
                      <div class="line"></div>
                      <div class="text">认证审核</div>
                    </div>
                    <!-- <div class="add" @click="add">
                      <el-row>
                        <el-button class="button">
                          <div class="button_add">
                            <div class="jia">+</div>
                            <p class="xz">新增</p>
                          </div>
                        </el-button>
                      </el-row>
                    </div> -->
                  </div>

                  <el-divider></el-divider>
                  <div style="display: flex;flex-direction: row;">
                    <p style="font-size: 15px;">状态</p>
                    <el-select v-model="value2" placeholder="全部" style="margin-left: 2%;">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                    <div class="search" >
                      <input type="text"  placeholder="医生姓名/医疗机构" v-model="apply"  />
                      <button class="icon" @click="getAuditByName">
                        <img
                          style="width: 30%"
                          src="../assets/img/search.png"
                          alt=""
						  
                        />
                      </button>
                    </div>
                  </div>
                  <div class="table-responsive" v-if="select===1">
                    <table class="table">
                      <thead>
                        <tr>
                          <th>序号</th>
                          <th>申请编号</th>
                          <th>医生姓名</th>
                          <th>医疗机构</th>
                          <th>规范心衰中心环节</th>
                          <th>手机号码</th>
                          <th>管理制度</th>
                          <th>协调体系</th>
                          <th>心衰架构</th>
                          <th>创建时间</th>
                          <th>填报人员</th>
                          <th>审核状态</th>
                          <th>操作</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="(item, index) in list" :key="index">
                          <td>{{ index+1 }}</td>
                          <td>{{ item.applyNumber }}</td>
                          <td>{{ item.name }}</td>
                          <td>{{ item.medicalOrganization }}</td>
                          <td>{{ item.specificationCenter }}</td>
                          <td>{{ item.phone }}</td>
                          <td>{{item.manageSystem}}</td>
                          <td>{{item.coordinate}}</td>
                          <td>{{item.xsjg}}</td>
                          <td>{{item.createTime}}</td>
                          <td>{{item.writtenBy}}</td>
                          <td v-if="item.status == 0">审核中</td>
                          <td v-if="item.status == 1">已通过</td>
                          <td v-if="item.status == 2">已拒绝</td>
                          <td class="text-right d-flex" style="margin-top: -0.5%;">
                            <el-button type="text" @click="xiangqing(item.id)" >详情</el-button>
                            <el-button type="text" @click="ok(item.id,1)">审核通过</el-button>
                              
                            <el-button type="text" @click="ok(item.id,2)">驳回申请</el-button>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                    <div class="block" @click="selectAudits">
                      <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage4"
                        :page-sizes="[10]"
                        :page-size="10"
                        layout=" prev, pager, next,sizes,total,  jumper"
                        :total="1000">
                      </el-pagination>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- /Page Wrapper -->
    </div>
    <!-- /Main Wrapper -->
  </div>
</template>
<script src="../assets/js/jquery-3.6.0.min.js"></script>
<script src="../assets/js/bootstrap.bundle.min.js"></script>
<script src="../assets/plugins/slimscroll/jquery.slimscroll.min.js"></script>
<script  src="../assets/js/script.js"></script>
<script>
export default {
  data() {
    return {
      // msg: "" ,
      xiabiao:1,
      options: [{
          value: '选项1',
          label: '全部'
        }, {
          value: '选项2',
          label: '全科'
        }, {
          value: '选项3',
          label: '内科'
        }, {
          value: '选项4',
          label: '全院'
        }],
        value2:'',
      value1:'',
      input:'',
      input1:'',
      input2:'',
      select:1,
      value: true,
      zhi:"1",
      currentPage4: 1,
	  apply:'',
      list: [],
        dialogFormVisible: false,
        dialogFormVisible1:false,
        
        formLabelWidth: '120px'
    };
  },
  created(){
    this.selectAudits()
  },
  mounted(){
    $('#sidebar-menu a').on('click', function(e) {
			if($(this).parent().hasClass('submenu')) {
				e.preventDefault();
			}
			if(!$(this).hasClass('subdrop')) {
				$('ul', $(this).parents('ul:first')).slideUp(350);
				$('a', $(this).parents('ul:first')).removeClass('subdrop');
				$(this).next('ul').slideDown(350);
				$(this).parent().find('a.active').next().slideDown(350);
				$(this).addClass('subdrop');
			} else if($(this).hasClass('subdrop')) {
				$(this).removeClass('subdrop');
				$(this).next('ul').slideUp(350);
				$(this).parent().find('a').next().slideUp(350);
			}
		});
		$('#sidebar-menu ul li.submenu a.active').parents('li:last').children('a:first').addClass('active').trigger('click');
  },
  // created(){
  //   this.xiangqing();
  // },
  methods: {

    // 审核
    ok(id,stat){
		if(stat == 1){
			this.axios.post("/audit/alterStatus?id="+ id +"&status="+stat+"&reject=''").then(res=>{
			  this.selectAudits()
					if(stat == 1){
						this.axios.post('/audit/createPwd?id='+id).then(res=>{
							console.log('成功',res)
						})
					}
			})
			return
		}
		if(stat == 2){
			this.$prompt('请输原因', '提示', {
			          confirmButtonText: '确定',
			          cancelButtonText: '取消',
			        }).then(({ value }) => {
			         this.axios.post("/audit/alterStatus?id="+ id +"&status="+stat+"&reject="+value).then(res=>{
			           this.selectAudits()
			         })
			        }).catch(() => {
			              
			        });
		}
    },



    //分页查询	查询的是上面的值POST
    selectAudits(){
      this.axios.post('/audit/selectAudits',{
        currentPage:this.xiabiao,//页面起始下标
        pageSize:10,//页面容量
        value:'',//模糊查询的值   可以为null
      }).then(res=>{
        console.log(res);
        this.list = res.list
      })
    },
    //根据姓名查询状态Get
    getAuditByName(){
		if(this.apply == ''){
			this.selectAudits()
			return
		}
      this.axios.get('/audit/getAuditByNumber?applyNumber='+this.apply).then(res=>{
		 let arr = [res]
		 console.log(arr)
		 this.list =arr
		 this.apply = ''
      })
    },
    //根据id查询详情GET
    xiangqing(id){
      console.log('出来',id)
      this.$router.push("/rzxxsh?id="+id)
    },
    password(){
      this.$router.push("/password")
    },
    zhgl(){
      this.$router.push("/zhgl")
    },
    czrz(){
      this.$router.push("/czrz")
    },
    myrenzheng(){
      this.$router.push("/myrenzheng")
    },
    myyy(){
      this.$router.push("/myyy")
    },
    rzsh(){
      this.$router.push("/rzsh")
    },
    yygzt(){
      this.$router.push("/yuyue")
    },
    shebei(){
      this.$router.push("/sbguanli")
    },
    fenlei(){
      this.$router.push("/sbfenlei")
    },
    jixiao(){
      this.$router.push("/")
    },
    add(){
      this.$router.push("/scgbxinzeng");
    },
    dianji(val){
      this.zhi=val;
      this.select=val;
      console.log(this.zhi)
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.xiabiao = val 
      console.log('下标',this.xiabiao)
    },
  },
  // async created() {
  //   this.msg = await this.axios.post("/xs_demo", { name: "我是姓名" });
  // },
};
</script>

<style src="../assets/css/bootstrap.min.css"></style>
<style src="../assets/plugins/fontawesome/css/fontawesome.min.css"></style>
<style src="../assets/plugins/fontawesome/css/all.min.css"></style>
<style src="../assets/css/feather.css"></style>
<style src="../assets/css/style.css"></style>
<style scoped>
/deep/.el-dialog{
  width: 40%;
}
</style>
<style lang="less"  scoped>

.con {
  text-align: center;
  background: white;
  display: flex;
  flex-direction: row;
  .con_title {
    display: flex;
    flex-direction: row;
    width: 80%;
    .line {
    width: 5px;
    height: 25px;
    background: rgb(190, 47, 46);
  }
  .text {
    font-size: 18px;
    font-weight: 600;
    margin-left: 1%;
  }
    .active{
      background: rgb(190, 47, 46);
      color: #ffff !important;
      border: 0;
    }
    #title_div0 {
      font-size: 16px;
      width: 15%;
      padding: 0.5%;
      border: 2px solid rgb(204, 204, 204);
      border-right: 0;
      color: rgb(204, 204, 204);
      font-weight: 600;
      padding-top: 1%;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
    }
    #title_div1 {
      font-size: 16px;
      width: 15%;
      padding: 0.5%;
      border: 2px solid rgb(204, 204, 204);
      border-right: 0;
      padding-top: 1%;
      color: rgb(204, 204, 204);
      font-weight: 600;
    }
    #title_div2 {
      font-size: 16px;
      width: 15%;
      padding: 0.5%;
      border: 2px solid rgb(204, 204, 204);
      border-right: 0;
      padding-top: 1%;
      color: rgb(204, 204, 204);
      font-weight: 600;
    }
    #title_div3 {
      font-size: 16px;
      width: 15%;
      padding: 0.5%;
      padding-top: 1%;
      border: 2px solid rgb(204, 204, 204);
      color: rgb(204, 204, 204);
      font-weight: 600;
      border-top-right-radius: 5px;
      border-bottom-right-radius: 5px;
    }
  }
  .add {
    .button {
      background: rgb(190, 47, 46);
      .button_add {
        display: flex;
        flex-direction: row;
        .jia {
          width: 16px;
          border-radius: 10px;
          background: #ffff;
          color: rgb(190, 47, 46);
          font-weight: 700;
          font-size: 15px;
          line-height: 11px;
        }
        .xz {
          color: #ffff;
          margin-left: 10px;
        }
      }
    }
  }
}
.search {
  border: 2px solid rgb(204, 204, 204);
  width: 23%;
  margin-left: 2%;
  border-radius: 3px;
  position: relative;
  input {
    border: 0;
    color: rgb(204, 204, 204);
    height: 32px;
    font-size: 15px;
    width: 79%;
    margin-left: 2%;
    margin-top: 1%;
  }
  ::-webkit-input-placeholder {
    color: rgb(204, 204, 204);
  }
  .icon {
    border: 0;
    background: rgb(190, 47, 46);
    color: #ffff;
    font-size: 20px;
    width: 19%;
    height: 36px;
    border-radius: 0;
    padding-bottom: 1%;
    position: absolute;
  }
}
.table-responsive{
  .table{
    tbody{
      tr:hover{
        box-shadow: 2px 2px 7px #777;
      }
    }
  }
}
</style>
